<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/009.css"/>
	<style type="text/css">
		/* 标签（类型/元素）选择器 */
		div {
			color: blue;
		}
		
		/* ID选择器 */
		#box01 {
			background: #CCC;
		}
		
		/* 类选择器 */
		.cen {
			color: green;
			font-size: 60px;
		}
		
		/* 通用选择器 */
		* {
			border-color: #FF0000;
			border-width: 1px;
			border-style: solid;
		}
		
		/*  属性选择器 */
		input[type='text'] {
			border: none; height: 100px;
		}
		
		/* 复合选择器 */
		html,body,div,input,p,a,span {
			border: none;
		}
		
		/* 后代选择器 */
		/* 可以根据选择器的权重值进行计算，比较哪个优先级更高
			也可以判断，哪个选择器更为精确，哪个优先级更高
		*/
		#cont a {
			color: black;
			font-size: 30px;
		}
		
		.txt a {
			color: #008000;
			font-size: 12px;
		}
		
		#abc.spell div p#sm a[attr] {
			
		}
	</style>
	<body>
		<div id="abc" class="spell">
			<ul>
				<li>
					<div>
						<div>
							<p id="sm">
								<a href="" attr="？？？"></a>
								<a href=""></a>
							</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		
		<div style="color:red">
			唧唧复唧唧
		</div>
		<div>
			生活不止眼前的苟且，还有明天和后天的苟且。
		</div>
		<div class="txt" id="box01">
			六一儿童节不放假，再也不相信爱情了！！
		</div>
		<div class="cen">
			做人没用梦想，那跟咸鱼有什么分别？————周星驰
		</div>
		<div>
			<input type="text" name="username">
			<input type="button" value="按钮">
		</div>
		<div>
			<div class="txt">
				<div>
					<p>
						<span id="cont">
							<a href="">哈哈</a>
						</span>
					</p>
				</div>
			</div>
		</div>
		<a href="">1234</a>
		<a href="">1234</a>
		<a href="">1234</a>
		<a href="">1234</a>
		<a href="">1234</a>
	</body>
</html>